<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
      
          plain
    
          @click="handleAdd"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button

          plain
 
          @click="translation"
        >打印 </el-button>
      </el-col>
      <right-toolbar @queryTable="getList"></right-toolbar>
    </el-row>

    <vxe-table
      ref="table"
      :data="tableData.list"
      :loading="tableData.loading"
      :sort-config="{ multiple: true }"
      :pagination-config="{ position: 'bottom' }"
    >
      <vxe-column field="number" title="编号"></vxe-column>
      <vxe-column field="num" title="数量"></vxe-column>
      <vxe-column field="createUserName" title="申请人"></vxe-column>
      <vxe-column field="remark" title="备注"></vxe-column>
      <vxe-column field="status" title="状态" align="center">
        <template #default="scope">
          <dict-tag :options="apply_state" :value="scope.row.state" />
        </template>
      </vxe-column>
      <vxe-column title="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button style="margin-right: 10px;" link type="primary"
            size="small" v-if="scope.row.state === 0 || scope.row.state === 3"
            @click="handleSub(scope.row)"
          >提交</el-button>

          <el-button style="margin-right: 10px;" link type="primary"
            size="small" v-if="scope.row.state === 0 || scope.row.state === 3"
            @click="handleUpdate(scope.row)"
          >修改</el-button>

          <el-button v-if="scope.row.state === 0 || scope.row.state === 3"
            size="small" link type="primary"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </vxe-column>
    </vxe-table>
<div class="pagination-container">
    <pagination
      v-show="tableData.paging.total > 0"
      :total="tableData.paging.total"
      v-model:page="tableData.paging.pageNum"
      v-model:limit="tableData.paging.pageSize"
      @pagination="getList"
    />
  </div>
    <el-dialog
      v-model="isStampsDialogVisible"
      width="50%"
      @close="handleDialogClose"
    >
      <stamps-dialog ref="stampsDialog" @sub="getList"></stamps-dialog>
    </el-dialog>
    
    <send-apply-dialog ref="sendApplyDialog" @sub="getList"></send-apply-dialog>

  </div>
</template>
<script setup>
  import api from "./api.js";
  import SendApplyDialog from "@/components/Consume/SendApplyDialog.vue";
  import  StampsDialog from "@/components/stamps/stamps.vue"
  const { proxy } = getCurrentInstance();
  const { apply_state } = proxy.useDict("apply_state");

  const sendApplyDialog = ref();
  const stampsDialog = ref();
  const isStampsDialogVisible = ref(false);
  const tableData = reactive({
    loading: false,
    list: [], // 表格列表数据
    paging: {
      total: 0, // 总条数
      pageNum: 1,
      pageSize: 10,
    }
  });

  const initQueryParams = {
    applyType: 'HCPF',
    field: 'number',
    value: null
  }

  const queryParams = reactive({...initQueryParams})

  /** 查询列表 */
  async function getList() {
    tableData.loading = true;
    const {pageNum, pageSize} = tableData.paging;
    const query = {...queryParams};
    const pageReq = {page: pageNum - 1, size: pageSize};
    api.list(query, pageReq).then(response => {
      const { content, totalElements } = response
      tableData.list = content;
      tableData.paging.total = totalElements;
      tableData.loading = false;
    }).catch(error => {
      tableData.loading = false;
      console.log(error);
    });
  }

  function reset() {
    Object.assign(queryParams, initQueryParams);
  }


  function handleAdd() {
    sendApplyDialog.value.open();
  }

  function translation() {
  isStampsDialogVisible.value = true; 
}
  function handleUpdate(row) {
    sendApplyDialog.value.open(row);
  }

  function handleDialogClose() {
  
  isStampsDialogVisible.value = false; 
}
  function handleSub(row) {
    api.sub(row.id).then(()=> {
      this.getList();
    });
  }

  /** 删除按钮操作 */
  function handleDelete(row) {
    proxy.$modal.confirm('是否确认删除').then(function() {
      return api.del(row.id);
    }).then(() => {
      this.getList();
      proxy.$modal.msgSuccess("删除成功");
    }).catch(() => {});
  }

  onMounted(()=> {
    getList();
  })

  </script>
  
<style lang="scss" scoped>
.app-container {
  display: flex;
  flex-direction: column;
  height: 92vh; 
  overflow: hidden; 
}

.vxe-table {
  flex: 1;
  overflow: auto;
}

.pagination-container {
  display: flex;
  justify-content: flex-end; 

}
</style>

